<template>
    <div class="container">
        <div class="row">
            <div class="Icon d-none d-lg-block" :style="{backgroundImage:`url(${bg})`}">
                <div class="content">
                    <a name="programme"></a>
                    <div class="tit">
                        <img src="@static/introduce/rolve.png">
                    </div>
                    <div class="wrap">
                        <div class="odd">
                            <div class="one common">
                                <div class="odd_left"><div class="img_bg special"><img src="@static/introduce/1.png"></div></div>
                                <div class="odd_right">
                                    <h3>新微商解决方案</h3>
                                    <span>
                                            授权、团队、订单、防伪、返利
                                            仓储物流功能一应俱全
                                    </span>
                                </div>
                            </div>
                            <div class="three common">
                                <div class="odd_left"><div class="img_bg"><img src="@static/introduce/3.png"></div></div>
                                <div class="odd_right">
                                    <h3>培育培训解决方案</h3>
                                    <span>
                                        专业授课，制定计划，定向培训
                                    </span>
                                </div>
                            </div>
                            <div class="five common">
                                <div class="odd_left"><div class="img_bg"><img src="@static/introduce/5.png"></div></div>
                                <div class="odd_right">
                                    <h3>流量解决方案</h3>
                                    <span>
                                        引流、分流、回流
                                    </span>
                                </div>
                            </div>
            
                        </div>
                        <div class="even">
                            <div class="two common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/2.png" width="17px" height="43px"></div></div>
                                <div class="even_right">
                                    <h3>多模式解决方案</h3>
                                    <span>市场渠道广，可以完美匹配不同模
                                            式的市场需求
                                    </span>
                                </div>
                            </div>
                            <div class="four common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/4.png"></div></div>
                                <div class="even_right">
                                    <h3>市场营销解决方案</h3>
                                    <span>
                                        针对需求，提升竞争力，可视化实
                                        时数据墙
                                    </span>
                                </div>
                            </div>
                            <div class="six common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/6.png"></div></div>
                                <div class="even_right">
                                    <h3>数据营销解决方案</h3>
                                    <span>
                                        数据魔方，实时更新，产品动态可
                                        视化
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Icon_block d-col-block d-md-none">
                            <div class="one common">
                                <div class="odd_left"><div class="img_bg special"><img src="@static/introduce/1.png" height="18px"></div></div>
                                <div class="odd_right">
                                    <h3>新微商解决方案</h3>
                                    <span>
                                            授权、团队、订单、防伪、返利
                                            仓储物流功能一应俱全
                                    </span>
                                </div>
                            </div>
                            <div class="two common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/2.png" width="7px"></div></div>
                                <div class="even_right">
                                    <h3>多模式解决方案</h3>
                                    <span>市场渠道广，可以完美匹配不同模
                                            式的市场需求
                                    </span>
                                </div>
                            </div>
                            <div class="three common">
                                <div class="odd_left"><div class="img_bg"><img src="@static/introduce/3.png"></div></div>
                                <div class="odd_right">
                                    <h3>培育培训解决方案</h3>
                                    <span>
                                        专业授课，制定计划，定向培训
                                    </span>
                                </div>
                            </div>
                            <div class="four common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/4.png"></div></div>
                                <div class="even_right">
                                    <h3>市场营销解决方案</h3>
                                    <span>
                                        针对需求，提升竞争力，可视化实
                                        时数据墙
                                    </span>
                                </div>
                            </div>
                            <div class="five common">
                                <div class="odd_left"><div class="img_bg"><img src="@static/introduce/5.png"></div></div>
                                <div class="odd_right">
                                    <h3>流量解决方案</h3>
                                    <span>
                                        引流、分流、回流
                                    </span>
                                </div>
                            </div>
                            <div class="six common">
                                <div class="even_left"><div class="img_bg"><img src="@static/introduce/6.png"></div></div>
                                <div class="even_right">
                                    <h3>数据营销解决方案</h3>
                                    <span>
                                        数据魔方，实时更新，产品动态可
                                        视化
                                    </span>
                                </div>
                            </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            bg:require('@static/introduce/area_background.png'),

        }
    }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .container{
        width:100% !important
        padding-left:30px !important
        .row{
            .Icon_block{
                .common{
                    margin:20px auto
                    display:flex
                    justify-content: space-around
                    width:350px
                    height:53px
                    .odd_left,.even_left{
                        width:50px
                        height: 50px
                        background-color: #cdd2f6
                        position:relative

                        .img_bg{
                            position:absolute
                            left:50%
                            top:50%
                            transform:translate(-50%,-50%)
                            width:10px
                            img{
                                width:10px
                                // height:100%
                            }
                        }
                        .special{
                            img{
                                width:8px !important

                            }
                        }

                            
                    }
                    .odd_right,.even_right{
                        width:250px

                        padding-left:7px
                        display:flex
                        flex-direction:column
                        h3{
                            font-size:15px
                            font-weight:700
                        }
                        span{
                            display:inline-block
                            line-height:15px
                            font-size:10px
                            // width:258px
                            margin-top: 10px
                        }

                    }
                }
            }
        }
    }
}
    .Icon
        width:100%
        height:856px
        color:#fff
        margin:0
        padding: 0
        background-size:cover
        margin-top:100px
        .content
            margin: 0px auto
            width:50%
            height: 75%
            display:flex
            flex-direction:column
            justify-content: space-between
            .tit
                width: 118px
                height: 28px
                margin: 100px auto
                img
                    width:100%
                    height:100%
            .wrap
                height:100%
                display:flex
                justify-content: space-between
                .odd
                    display:flex
                    flex-direction:column
                    justify-content: space-between

                    .common
                        display:flex
                        justify-content: space-around
                        width:380px
                        height:93px
                        .odd_left
                            width:93px
                            height: 93px
                            background-color: #cdd2f6
                            position:relative
                            .img_bg
                                position:absolute
                                left:50%
                                top:50%
                                transform:translate(-50%,-50%)
                                width:28px
                                height:43px
                                img
                                    width:100%
                                    height:100%
                            .special
                                width:19px
                                height:43px
                        .odd_right            
                            padding-left:27px
                            display:flex
                            flex-direction:column
                            h3
                                font-size:24px
                            span
                                display:inline-block
                                line-height:25px
                                font-size:19px
                                width:258px
                                margin-top: 20px
                .even
                    display:flex
                    flex-direction:column
                    justify-content: space-between

                    .common
                        display:flex
                        justify-content: space-around
                        width:380px
                        height:93px
                        .even_left
                            width:93px
                            height: 93px
                            background-color: #cdd2f6
                            position:relative
                            
                            .img_bg
                                position:absolute
                                left:50%
                                top:50%
                                transform:translate(-50%,-50%)
                                width:28px
                                height:43px
                                img
                                    width:100%
                                    height:100%
                        .even_right            
                            padding-left:27px
                            display:flex
                            flex-direction:column
                            h3
                                font-size:24px
                            span
                                display:inline-block
                                line-height:25px
                                font-size:19px
                                width:258px
                                margin-top: 20px

                    // .one
                    //     div
                            
                            
                //         .span

                //     .three
                //     .five
                // .even
                //     display:flex
                //     justify-content: space-around
                //     .two
                //         .div
                //             img
                //         .span
                //     .four
</style>